<script setup lang="ts">
import {computed, onMounted, onUnmounted, ref} from "vue";
import {now, toQaDateTime} from "@/utils/datetime";
import {boardInfo} from "@/api/apis/cc/board";
import {copyRight} from "@/api/apis/qa/dic";
import zhCn from "element-plus/es/locale/lang/zh-cn";
import en from "element-plus/es/locale/lang/en";
import lineImage from "@/assets/img/line.png"

const currentTime = ref(new Date().toLocaleString());
const timer = ref<number | null>(null);
const timerMin = ref<number | null>(null);
const CopyRightInfo = ref('');
const boardData = ref();
const lineUrl = ref(lineImage);

/**
 * 组件挂载时初始化定时器
 */
onMounted(() => {
  timer.value = setInterval(() => {
    currentTime.value = new Date().toLocaleString();
  }, 1000);

  timerMin.value = setInterval(() => {
    initInfo();
  }, 60000);
});

/**
 * 组件销毁时清除定时器
 */
onUnmounted(() => {
  if (timer.value !== null) {
    clearInterval(timer.value);
  }

  if (timerMin.value !== null) {
    clearInterval(timerMin.value);
  }
});

/**
 * 加载看板数据
 */
const loadBoardData = async () => {
  boardData.value = await boardInfo();

  console.log('当前时间：', now());
};

/**
 * 初始化信息
 */
const initInfo = async () => {

  await loadBoardData();

  CopyRightInfo.value = await copyRight();
};

initInfo();

const language = ref('zh-cn')
const locale = computed(() => (language.value === 'zh-cn' ? zhCn : en))

const toggle = () => {
  language.value = language.value === 'zh-cn' ? 'en' : 'zh-cn'
}

</script>

<template>
  <div class="t-main">
    <div class="t-head">
      <div class="t-title"><span>·芯中心状态看板·</span></div>
      <div class="t-line">
        <el-image style="width: 900px;" :src="lineUrl"/>
      </div>
      <div class="t-head-time">
        <span>{{ toQaDateTime(currentTime) }}</span>
      </div>
    </div>
    <div class="t-body">
      <el-config-provider :locale="locale">
        <el-table :data="boardData" class="t-table">
          <el-table-column prop="area" label="片区"/>
          <el-table-column prop="dengJingNum" label="等径数量"/>
          <el-table-column prop="shouWeiNum" label="收尾数量"/>
          <el-table-column prop="duanXianNum" label="断线数"/>
          <el-table-column prop="fangDuanNum" label="放断数"/>
          <el-table-column prop="dengDuanNum" label="等断数"/>
          <el-table-column prop="tiaoWenNum" label="调温数量"/>
          <el-table-column prop="yinJingNum" label="引晶数量"/>
          <el-table-column prop="yinJingToHandNum" label="引晶切手动">
            <template #default="scope">
              <el-popover effect="light" trigger="hover" placement="top" width="auto">
                <template #default>
                  <div>具体炉台</div>
                  <div>{{ scope.row.yinJingToHandMachine }}</div>
                </template>
                <template #reference>
                  <el-tag>{{ scope.row.yinJingToHandNum }}</el-tag>
                </template>
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column prop="fangJianNum" label="放肩数量"/>
          <el-table-column prop="fangJianToHandNum" label="放肩切手动">
            <template #default="scope">
              <el-popover effect="light" trigger="hover" placement="top" width="auto">
                <template #default>
                  <div>具体炉台</div>
                  <div>{{ scope.row.fangJianToHandMachine }}</div>
                </template>
                <template #reference>
                  <el-tag>{{ scope.row.fangJianToHandNum }}</el-tag>
                </template>
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column prop="stopNum" label="停炉数量"/>
          <!--<el-table-column prop="jiaoLiaoNum" label="加料数量"/>
          <el-table-column prop="tiaoWenDate" label="调温工时"/>
          <el-table-column prop="yinFangNum" label="引放数量"/>
          <el-table-column prop="lifeNum" label="成活数量"/>
          <el-table-column prop="lifeRate" label="成活率"/>-->
          <el-table-column prop="runTimeNum1" label="0-12H"/>
          <el-table-column prop="runTimeNum2" label="12-50H"/>
          <el-table-column prop="runTimeNum3" label="50-200H"/>
          <el-table-column prop="runTimeNum4" label="200-300H"/>
          <el-table-column prop="runTimeNum5" label="300-450H"/>
          <el-table-column prop="runTimeNum6" label="450-530H"/>
          <el-table-column prop="runTimeNum7" label="大于530H"/>
        </el-table>
      </el-config-provider>
    </div>
    <div class="t-foot">
      <div>
        <span>{{ CopyRightInfo }}</span>
      </div>

    </div>
  </div>
</template>

<style lang="scss" scoped>
.t-main {
  background-image: url('@/assets/img/bg.png');
  background-size: 100% 100%;
  box-shadow: 0 0 3px blue;
  display: flex;
  flex-direction: column;
  position: absolute;
  width: 100%;
  height: 100%;
}

.t-line {
  height: 100px;
  width: 90%;
  padding-top: 0;
  margin-top: 0;
  position: absolute;
  top: -160px;
  left: 90px;
}

.t-head {
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  //background-color: #f5f5f5;
  text-align: center;
  color: white;
}

.t-title {
  font-size: 36px;
  font-weight: bold;
  padding-top: 10px;
}

.t-head-time {
  font-weight: bold;
  font-size: 18px;
  text-align: right;
  padding-right: 120px;
}

.t-body {
  flex: 1;
  padding: 70px;
  text-align: center;
  justify-content: space-between;
  align-items: center;
}

.t-table {
  width: 100%;
  font-weight: bold;
  font-size: 16px;
}

.el-table {
  --el-table-border-color: transparent;
  --el-table-border: 1px solid #e4e4e4;
  --el-table-text-color: #bdbdbe;
  --el-table-header-text-color: #bdbdbe;
  --el-table-row-hover-bg-color: transparent;
  --el-table-current-row-bg-color: transparent;
  --el-table-header-bg-color: transparent;
  --el-table-bg-color: transparent;
  --el-table-tr-bg-color: transparent;
  --el-table-expanded-cell-bg-color: transparent;
}

.t-foot {
  font-size: 12px;
  color: white;
  text-align: center;
  padding: 10px;
}
</style>